<template>
	<div id="AIReport" class="AIReport">
		<group class="AIReportGroup" title="本周课表">
			<tab :line-width=2 active-color='#fc378c' v-model="index">
				<tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
			</tab>
			<swiper v-model="index" :aspect-ratio="2" :show-dots="false">
				<swiper-item v-for="(item, index) in list2" :key="index">
					<div class="tab-swiper aiCellClass">
						<group class="aiGroupClass">
							<cell title="09:00~10:00" :value="userList[0]"></cell>
							<cell title="10:00~11:00" :value="userList[1]"></cell>
							<cell title="11:00~12:00" :value="userList[2]"></cell>
							<cell title="15:00~16:00" :value="userList[3]"></cell>
							<cell title="16:00~17:00" :value="userList[4]"></cell>
							<cell title="17:00~18:00" :value="userList[5]"></cell>
							<cell title="18:00~19:00" :value="userList[6]"></cell>
						</group>
					</div>
				</swiper-item>
			</swiper>
		</group>

	</div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import dateutils from '../../../../utils/date'
	import {Group, Cell, Tab, TabItem, Swiper, SwiperItem} from 'vux'
	const list = () => ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
	export default {
		name: "ai-report",
		components: {
			Group,
			Cell,
			Tab,
			TabItem,
			Swiper,
			SwiperItem
		},
		data() {
			return {
				list2: list(),
				demo2: '美食',
				index: 0,
				itemList: [],
				userList: []
			}
		},
		created: function () {
			var date = new Date()
			this.index = date.getDay() - 1
			this.getTeacherClassDetails()
		},
		watch: {
			index: function () {
				this.getTeacherClassDetails()
			},
			itemList: function () {
				this.userList = new Array("","","","","","","")
				for(var i=0; i<this.itemList.length; i++){
					var t = dateutils.getCusTime(this.itemList[i].time)
					switch (t){
						case '09:00':
							this.userList[0] += this.itemList[i].nickname + ' '
							break
						case '10:00':
							this.userList[1] += this.itemList[i].nickname + ' '
							break
						case '11:00':
							this.userList[2] += this.itemList[i].nickname + ' '
							break
						case '15:00':
							this.userList[3] += this.itemList[i].nickname + ' '
							break
						case '16:00':
							this.userList[4] += this.itemList[i].nickname + ' '
							break
						case '17:00':
							this.userList[5] += this.itemList[i].nickname + ' '
							break
						case '18:00':
							this.userList[6] += this.itemList[i].nickname + ' |'
							break
						default:
							break
					}
				}
			}
		},
		methods: {
			getTeacherClassDetails: function () {
				let _this = this
				let date = dateutils.getDate(dateutils.getDayOfWeek(this.index+1))
				NetWorking.doGet(
					'ai/getUserActListByDateWithRole',
					null,
					{
						params: {
							date: date,
							role: 'teacher'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.itemList = rs.user_act_date_list
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style lang="less">
	@import '~vux/src/styles/1px.less';
	@import '~vux/src/styles/center.less';

	.AIReport {
		margin-top: 66px;
		margin-bottom: 100px;
	}

	.AIReportGroup > .weui-cells__title {
		font-size: 20px;
		font-weight: bold;
	}

	.tab-swiper {
		background-color: #fff;
	}

	.aiGroupClass > .weui-cells > .weui-cell{
		padding: 0px 15px !important;
	}

	.aiGroupClass > .weui-cells > .weui-cell > .weui-cell__ft {
		width: 60%;
		word-wrap: break-word;
	}

	.aiGroupClass > .weui-cells {
		margin-top: 0!important;
		font-size: 14px;
	}

</style>